<template>
    <!-- 外部容器-->
    <div class="editorBox">
        <div class="editorToolbar"></div>
        <div class="editorContent">
            <Ckeditor
                v-model="editorData"
                class="doms"
                :editor="editor"
                :config="editorConfig"
                @ready="onReady"
                @input="onInput"
            ></Ckeditor>
        </div>
    </div>
</template>
<script lang="ts">
import './build/ckeditor.js'
import CKEditor from '@ckeditor/ckeditor5-vue'
import { defineComponent, ref } from 'vue'
import { MyUploadAdapter } from './imgAdapter'
import './build/styles.css'

export default defineComponent({
    name: 'Asd',
    components: {
        Ckeditor: CKEditor.component,
    },
    setup() {
        let editor = ClassicEditor
        let editorData = ref()
        let editorConfig = {
            toolbar: {
                items: [
                    'exportPdf',
                    'exportWord',
                    '|',
                    'heading',
                    '|',
                    'bold',
                    'italic',
                    '|',
                    'fontSize',
                    'fontFamily',
                    'fontColor',
                    'fontBackgroundColor',
                    '|',
                    'alignment:left',
                    'alignment:right',
                    'alignment:center',
                    'alignment:justify',
                    '|',

                    'specialCharacters',

                    '|',
                    'link',
                    'bulletedList',
                    'numberedList',
                    'HorizontalLine',
                    'blockQuote',
                    '|',
                    'outdent',
                    'indent',
                    '|',
                    'imageUpload',
                    'insertTable',
                    'codeblock',
                    '|',
                    'undo',
                    'redo',
                ],
            },

            language: 'zh-cn',
            image: {
                toolbar: [
                    'imageTextAlternative',
                    'imageStyle:inline',
                    'imageStyle:block',
                    'imageStyle:side',
                ],
            },

            exportPdf: {
                fileName: 'my-file.pdf',
                converterOptions: {
                    margin_top: '15mm',
                    margin_bottom: '15mm',
                    margin_right: '15mm',
                    margin_left: '15mm',
                    header_html: undefined,
                    header_and_footer_css:
            '#header, #footer { background: hsl(0, 0%, 95%); } .styled { font-weight: bold; text-align: center; } .styled-counter { font-size: 1em; color: hsl(0, 0%, 60%); }',
                },
            },
            exportWord: {
                fileName: 'document.docx',
                converterOptions: {
                    format: 'A4', // Default value, you don't need to specify it explicitly for A4.
                    margin_top: '20mm',
                    margin_bottom: '20mm',
                    margin_right: '12mm',
                    margin_left: '12mm',
                },
            },
            table: {
                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
            },
            licenseKey: '',
        }
        // 使用ckeditor5-build-decoupled-document 需要用户自己手动插入toolbar模板
        // 导出pdf ,word,都可以带图片导出
        // 如果自己有服务器 需要自己写好后端，将图片上传到服务器静态文件下，将上传路径返回
        const onReady = (editor) => {
            let toolbarContainer: Element = document.querySelector('.editorToolbar')
            toolbarContainer.appendChild(editor.ui.view.toolbar.element)
            // 使用适配器上传图片
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => new MyUploadAdapter(loader)
        }
        const onInput = (e) => {
            // 如果需要存储数据库可以将 e的内容存储
            console.log(e)
        }
        return {
            editorConfig,
            editorData,
            editor,
            onReady,
            onInput,
        }
    },
})
</script>
<style>
html[data-theme="dark"] .ck.ck-toolbar{
      background-color: rgb(44, 42, 42) !important;

} 

</style>
<style lang="less" scoped>
html[data-theme="dark"]{
.Iconpage {
      background: rgb(44, 42, 42);
   }
  
}
.editorBox {
  .doms {
    height: 50vh;
  }
  .editorContent {
    padding: 20px 50px;
    border: 1px solid #ccc;
    border-bottom: 1px solid transparent;
  }
}
.ck-content {
  height: 50vh;
}
.editorToolbar{
      background: red;
}
</style>
